<template>
    <div>
        <v-card>
            <v-card-title>
                <v-btn class="primary" @click="addBland()" >新增品牌</v-btn>
                <v-spacer></v-spacer>
                <v-text-field label = "搜索" append-icon="search" v-model = "key"></v-text-field>
            </v-card-title>

            <v-data-table
                    :headers="headers"
                    :items="brands"
                    :pagination.sync="pagination"
                    :total-items="totalBrands"
                    :loading="loading"
                    class="elevation-1"
            >
                <template slot="items" slot-scope="props">
                    <td align="center">{{ props.item.id }}</td>
                    <td class="text-xs-center">{{ props.item.name }}</td>
                    <td class="text-xs-center"><img :src="props.item.image"></td>
                    <td class="text-xs-center">{{ props.item.letter }}</td>
                    <td class="justify-center layout">
                        <v-btn color="info" @click="editBrand(props.item)" >编辑</v-btn>
                        <v-btn color="warning">删除</v-btn>
                    </td>
                </template>
            </v-data-table>

        </v-card>

        <v-dialog
                v-model="dialog"
                width="500"
                persistent
        >
            <brand-form @close="closeWindow" :is-edit="isEdit" :old-brand="oldBrand"></brand-form>
        </v-dialog>
    </div>

</template>

<script>

    import BrandForm from './BrandForm'
    export default {
        name: "my-brand.vue",
        components:{
          BrandForm
        },
        data() {
            return {
                brand:{
                    name:"",
                    image:"",
                    letter:""
                },
                dialog:false,   //控制显示不显示
                key:"",
                totalBrands: 0, // 总条数
                brands: [], // 当前页品牌数据
                loading: true, // 是否在加载中
                pagination: {}, // 分页信息
                headers: [
                    {text: 'id', align: 'center', value: 'id'},
                    {text: '名称', align: 'center', sortable: false, value: 'name'},
                    {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
                    {text: '首字母', align: 'center', value: 'letter', sortable: true,},
                    {text: '操作', align: 'center', value: 'id', sortable: false}
                ],
                isEdit : false  ,//默认新增
                oldBrand :{}
            }
        },


        methods: {
            getDataFromServer() { // 从服务的加载数据的方法。
                //    axios发送异步请求
                this.$http.get("/item/brand/page", {
                    params: {
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy:this.pagination.sortBy,
                        desc:this.pagination.descending,
                        key:this.key
                    }
                }).then(({data}) => {
                    this.brands = data.items;
                    this.totalBrands = data.total;
                    this.loading = false;

                }).catch(resp => {
                    console.log("请求失败");
                    console.log(resp)
                })


            },
            addBland(){
                this.oldBrand = {},
                this.dialog = true   ;//控制显示不显示
                this.isEdit = false;
            },
            closeWindow(){
                this.dialog = false;
            },
            //编辑对话框
            editBrand(oldBrand){
                //查询分类信息
                this.$http.get("item/category/of/brand?bid="+oldBrand.id)
                    .then(resp => {
                        //将查询结果赋给categories
                        oldBrand.categories = resp.data;

                        //当前是vue对象
                        this.oldBrand = oldBrand;
                        this.isEdit = true; //确定是编辑
                        this.dialog = true; //显示对话框

                    });

            }

        },mounted() {
                this.getDataFromServer();
            },
            watch:{
                //
                pagination:{
                    deep:true,
                    handler(){
                    this.getDataFromServer();
                    }
                },
                key(){
                    this.getDataFromServer();
                }
            }
    }
</script>

<style scoped>

</style>